import { Form, Input, Select } from "antd"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_CancelAndSubmitFooterComponent from "../../../../../../component/modal/component/cancelAndSubmitFooter";

// 主页-调试测试页面-手动投切页面-弹窗组件
interface homePageDebuggingAndTestingPageManualSwitchingPageModalComponentInterface {
    modalData:object
    change_cancel: Function
}
const HomePage_DebuggingAndTestingPage_ManualSwitchingPage_ModalComponent: React.FC<homePageDebuggingAndTestingPageManualSwitchingPageModalComponentInterface> = (props) => {
    const [form] = Form.useForm();
    const formList = [
        {
            label: "操作员",
            key: "teamName",
            type: "input",
            placeholder: '请输入操作员'
        },
        {
            label: "操作密码",
            key: "teamName",
            type: "inputPassword",
            placeholder: '请输入操作密码'
        },
        {
            label: "调度编号",
            key: "teamName",
            type: "input",
            placeholder: '请输入调度编号'
        },
        {
            label: "监护人",
            key: "teamName",
            type: "select",
            optionList: []
        },
    ]
    const change_submit = () => {
        form.validateFields().then((value) => {

        })
    }
    return (
        <div className={lessModule["homePageDebuggingAndTestingPageManualSwitchingPageModalComponent"]}>
            <header className={lessModule["homePageDebuggingAndTestingPageManualSwitchingPageModalComponent-header"]}>投切控制</header>
            <main className={lessModule["homePageDebuggingAndTestingPageManualSwitchingPageModalComponent-main"]}>
                <div>确定要命令“闭合”远动开关吗？</div>
                <Form className={lessModule["homePageDebuggingAndTestingPageManualSwitchingPageModalComponent-main__form"]}
                    form={form}
                    initialValues={{ "": "6666" }}
                >
                    {
                        formList.map((item, idx,) => {
                            return (
                                <Form.Item key={`formItem${idx}`} className={lessModule["main-form__item"]}
                                    label={`${item["label"]}：`}
                                    name={item['key']}
                                    required={false} 
                                    rules={[{ required: true, message: item["placeholder"] }]}
                                >
                                    {
                                        item["type"] === "select" && <Select className={lessModule["form-item__select"]} showSearch
                                            placeholder={item["placeholder"]}
                                            options={[
                                                { value: '1', label: '艾特能团队' },
                                                { value: '2', label: '艾特能团队' },
                                            ]}
                                        />
                                    }
                                    {
                                        item["type"] === "input" && <Input className={lessModule["form-item__input"]} placeholder={item["placeholder"]} autoComplete="off" />
                                    }
                                    {
                                        item["type"] === "inputPassword" && <Input.Password className={lessModule["form-item__input"]} visibilityToggle={false} placeholder={item["placeholder"]} autoComplete="off" />
                                    }
                                </Form.Item>
                            )
                        })

                    }
                </Form>
            </main>
            <footer className={lessModule["homePageDebuggingAndTestingPageManualSwitchingPageModalComponent-footer"]}>
                <HomePage_ModalComponent_CancelAndSubmitFooterComponent flexGap={24} fontSize={16} change_cancel={() => props.change_cancel(false)} change_submit={change_submit} />
            </footer>
        </div>
    )
}
export default HomePage_DebuggingAndTestingPage_ManualSwitchingPage_ModalComponent